/* 让整个布局严格贴满视口高度 */
.common-layout { height: 100vh; display: flex; flex-direction: column; position: relative; }

/* 主题切换提示条 */
.theme-notice {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  border-radius: 20px;
  font-size: 13px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: theme-notice-fade-in 0.3s ease;
}

.theme-notice .el-icon {
  font-size: 16px;
}

@keyframes theme-notice-fade-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.common-layout > .el-container.is-vertical { height: 100%; flex: 1; min-height: 0; }
.common-layout > .el-container.is-vertical > .el-container { flex: 1; min-height: 0; overflow: hidden; }
/*header区域 */
.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 暗黑模式 - Header */
.dark .header-wrapper {
  background-color: #1e1e1e;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid #303030;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.right-area {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* 新增：右侧快捷图标组与按钮态 */
.header-actions { display: inline-flex; align-items: center; gap: 12px; }
.icon-btn { cursor: pointer; color: #909399; transition: color .2s, transform .1s; }
.icon-btn:hover { color: #606266; }
.icon-btn:active { transform: scale(0.96); }

/* 通知徽章样式 */
.notification-badge {
  line-height: 1;
}

/* 通知图标禁用状态 */
.notification-icon.is-disabled {
  color: #c0c4cc !important;
  opacity: 0.5;
  cursor: not-allowed;
}

.notification-icon.is-disabled:hover {
  color: #c0c4cc !important;
  transform: none !important;
}

/* 暗黑模式 - 头部图标 */
.dark .icon-btn { color: #b3b3b3; }
.dark .icon-btn:hover { color: #e5eaf3; }

/* 暗黑模式 - 通知图标禁用状态 */
.dark .notification-icon.is-disabled {
  color: #666 !important;
  opacity: 0.4;
}

.clock-box {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #606266;
  font-size: 14px;
}

/* 暗黑模式 - 时钟 */
.dark .clock-box {
  color: #b3b3b3;
}

.dark .clock-box .current-time {
  color: #e5eaf3;
}

/* 统一页面面包屑与顶部间距（全局约定 16px） */
:deep(.el-breadcrumb) { margin-bottom: 16px; }

.user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-trigger:hover {
  background-color: #f5f7fa;
}

/* 新增：禁用态（退出处理中） */
.user-trigger.is-disabled { opacity: .6; pointer-events: none; }

.user-avatar {
  background: linear-gradient(315deg, #42d392 25%, #647eff);
}

.username {
  font-size: 14px;
  color: #303133;
}

.arrow-icon {
  transition: transform 0.2s;
  color: #c0c4cc;
}

.rotate {
  transform: rotate(180deg);
}

/* 直接退出按钮样式微调 */
.logout-btn { display: inline-flex; align-items: center; }

/* 现代风格退出弹窗样式 */
.logout-dialog :deep(.el-dialog__header) { display: none; }
.logout-dialog :deep(.el-dialog) {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-radius: 18px;
  overflow: hidden;
}
.logout-dialog :deep(.el-dialog__body) { padding: 28px 24px 22px; text-align: center; }
.ld-icon { width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #ff6b6b 0%, #ffd3d3 100%);
  color:#fff; box-shadow: 0 6px 18px rgba(255,107,107,.35); }
.ld-icon .el-icon { font-size: 30px; }
.ld-title { margin: 10px 0 6px; font-size: 20px; font-weight: 700; color: #1f2329; letter-spacing: .2px; }
.ld-desc { margin: 0 0 20px; font-size: 13px; color: #6b7280; }
.ld-actions { display:flex; gap:12px; justify-content:center; }
.logout-dialog :deep(.el-button) { height: 38px; padding: 0 18px; border-radius: 10px; }
.logout-dialog :deep(.el-button--default) {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  color: #374151;
}
.logout-dialog :deep(.el-button--default:hover) { background: rgba(255,255,255,0.7); }
.logout-dialog :deep(.el-button--danger) {
  background: linear-gradient(135deg,#ff6b6b 0%, #ff8a8a 100%);
  border: none;
}
.logout-dialog :deep(.el-button--danger:hover) { filter: brightness(1.05); }

/* 深色模式适配 */
.dark .logout-dialog :deep(.el-dialog) {
  background: rgba(30, 30, 32, 0.5);
  border: 1px solid rgba(255,255,255,0.12);
}
.dark .ld-title { color: #e5e7eb; }
.dark .ld-desc { color: #9ca3af; }

/* 自定义退出弹框样式（美化 + 尺寸） */
.custom-logout-modal {
  border-radius: 12px; /* 大圆角，更柔和 */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); /* 更明显的阴影 */
  overflow: hidden; /* 隐藏溢出内容，配合圆角 */
}

/* 弹框头部 */
.custom-logout-modal .el-message-box__header {
  padding: 16px 24px;
  background-color: #f8f9fa; /* 浅灰色背景 */
  border-bottom: 1px solid #eee;
}

.custom-logout-modal .el-message-box__title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 弹框内容区 */
.custom-logout-modal .el-message-box__content {
  padding: 24px;
  font-size: 14px;
  color: #666;
  text-align: center; /* 内容居中 */
}

/* 弹框按钮区 */
.custom-logout-modal .el-message-box__btns {
  justify-content: flex-end;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid #eee;
  background-color: #fff;
}

/* 确认按钮样式（渐变） */
.custom-logout-modal .el-button--primary {
  background: linear-gradient(315deg, #42d392 25%, #647eff);
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
}

.custom-logout-modal .el-button--primary:hover {
  opacity: 0.9;
}

/* 取消按钮样式 */
.custom-logout-modal .el-button--default {
  color: #666;
  border: 1px solid #ddd;
  padding: 8px 20px;
  border-radius: 4px;
}

.custom-logout-modal .el-button--default:hover {
  background-color: #f5f7fa;
  color: #333;
}

/* 退出进度消息样式 */
.logout-progress-message {
  z-index: 3000 !important; /* 确保显示在弹窗之上 */
}

.logout-progress-message .el-message__content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logout-progress-message .el-message__content::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid #409eff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: logout-spin 1s linear infinite;
}

@keyframes logout-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.el-container { height: calc(100vh - 60px); overflow: hidden; }
:deep(.el-main) { height: 100%; overflow: auto; padding-bottom: 0 !important; }
/* 允许子容器在 flex 中收缩，避免溢出导致出现额外空白 */
.common-layout :deep(.el-container) { min-height: 0; }

.el-row { height: 100%; }

.el-menu { height: 100%; overflow: auto; }

/* 右侧内容区按父容器自适应并内部滚动 */
:deep(.el-main) { height: 100%; overflow: auto; }

/* 暗黑模式 - 侧边栏 */
.dark .el-aside {
  background-color: #1f1f1f;
  border-right: 1px solid #303030;
}

/* 暗黑模式 - 菜单项悬停 */
.dark .el-menu-item:hover {
  background-color: #2a2a2a !important;
}

.dark .el-menu-item.is-active {
  background-color: #2a2a2a !important;
}
